<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('维修信息')" />
    <style>
        body{
            background-color: rgb(243,243,244);
        }
        h5{
            width: 160px;
            display: inline;
        }
        .form-select{
            width: 100px;
            display: inline;
        }
        .container{
            /*margin: 50px ;*/
            margin-bottom: 8px;
            background-color: #FFFFFF;
            border-radius: 10px;
        }
        #title{
            padding-top: 30px;
            background-color: #FFFFFF;
        }
        #span-pageinfo{
            margin-top: 10px;
            font-size: 15px;
        }
    </style>
</head>
<body>
<div id="title">
    <h3 class="text-center" id="titleInfo">维修信息</h3><br/>
</div>
<div class="container">
    <div class="text-center">
        <h5>楼号</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="buildingNo">
            <option selected>全部</option>
            <option value="1">1号</option>
            <option value="2">2号</option>
            <option value="3">3号</option>
        </select>&nbsp;&nbsp;
        <h5>房号</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="roomNo">
            <option selected>全部</option>
            <option value="1">0101</option>
            <option value="2">0102</option>
            <option value="3">0201</option>
            <option value="3">0202</option>
            <option value="3">0301</option>
            <option value="3">0302</option>
            <option value="3">0401</option>
            <option value="3">0402</option>
            <option value="3">0501</option>
            <option value="3">0502</option>
            <option value="3">0601</option>
            <option value="3">0602</option>
            <option value="3">0701</option>
            <option value="3">0702</option>
        </select>&nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="clickConfirm()">确认</button>
    </div><br/>

    <table class="table table-hover align-middle">
        <thead style="background-color: azure">
        <tr>
            <th scope="col">楼号</th>
            <th scope="col">房号</th>
            <th scope="col">报修日期</th>
            <th scope="col">维修日期</th>
            <th scope="col">是否从维修基金支出</th>
            <th scope="col">维修人</th>
            <th scope="col">金额</th>
            <th scope="col">维修内容</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr th:each="repairInfo:${repairList}">
            <td th:text="${repairInfo.getBuildingNo().trim()}"></td>
            <td th:text="${repairInfo.getRoomNo().trim()}"></td>
            <td th:text="${repairInfo.getApplicationDate().trim()}"></td>
            <td th:text="${repairInfo.getRepairDate().trim()}"></td>
            <td th:text="${repairInfo.getWhetherFromBalance().trim()}"></td>
            <td th:text="${repairInfo.getRepairMen().trim()}"></td>
            <td th:text="${repairInfo.getMoney().trim()}"></td>
            <td th:text="${repairInfo.getDetails().trim()}"></td>
        </tr>
        </tbody>
    </table>
    <div class="row">
        <div id="span-pageinfo" class="col-10">
            <span>显示 [[${page.startRow}]]/[[${page.endRow}]] 条,共 [[${page.total}]] 条记录</span>
        </div>
        <div id="page" class="col-2">
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link page-link-left" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <div th:each="count:${#numbers.sequence(1,page.pages)}">
                        <li th:class="${count==1}?'page-item active':'page-item' "><a class="page-link page-link-info" href="#">[[${count}]]</a></li>
                    </div>
<!--                    <li class="page-item active"><a class="page-link page-link-info" href="#">[[${page.pageNum}]]</a></li>-->
<!--                    <li class="page-item"><a class="page-link page-link-info" href="#">[[${page.pageNum+1}]]</a></li>-->
<!--                    <li class="page-item"><a class="page-link page-link-info" href="#">[[${page.pageNum+2}]]</a></li>-->
                    <li class="page-item">
                        <a class="page-link page-link-right" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    /**
     * 页面加载初始化下拉框数据,动态加载
     */
    $(function () {
        $.get("/queryInfo/residentInfo/buildingNoAndRoomNo",function (data){
            let buildingNo = data.buildingNo;
            let roomNo = data.roomNo;
            $("#buildingNo").empty();//清空下拉框
            let  buildingNoSelect = "<option selected>全部</option>";
            $("#buildingNo").append(buildingNoSelect);
            $.each(buildingNo,function (i) {
                buildingNoSelect = "<option>"+buildingNo[i].trim()+"</option>"
                $("#buildingNo").append(buildingNoSelect);
            })
            $("#roomNo").empty();//清空下拉框
            let  roomNoSelect = "<option selected>全部</option>";
            $("#roomNo").append(roomNoSelect);
            $.each(roomNo,function (i) {
                roomNoSelect = "<option>"+roomNo[i].trim()+"</option>"
                $("#roomNo").append(roomNoSelect);
            })
        })
    })
    clickConfirm = function (){
        $.get("/queryInfo/repair/condition",
            {
                buildingNo:$("#buildingNo option:selected").text(),
                roomNo:$("#roomNo option:selected").text(),
            },
            function (data,status){
                $("#tbody").empty();//清空表格
                $.each(data,function (i) {
                    let  tbody = "<tr><td>"+data[i].buildingNo.trim()+"</td>"
                        +"<td>"+data[i].roomNo.trim()+"</td>"
                        +"<td>"+data[i].applicationDate.trim()+"</td>"
                        +"<td>"+data[i].repairDate.trim()+"</td>"
                        +"<td>"+data[i].whetherFromBalance.trim()+"</td>"
                        +"<td>"+data[i].repairMen.trim()+"</td>"
                        +"<td>"+data[i].money.trim()+"</td>"
                        +"<td>"+data[i].details.trim()+"</td></tr>";
                    $("#tbody").append(tbody);
                })
            })
        $(".btn-primary").blur()
    }
    $(".page-link-info").on("click",function (e){
        e.preventDefault();
        getRepairInfoByPage($(this).text())
        removeActive();
        $(this).blur();//去掉焦点
        $(this).parent().addClass("active");//添加active类
    })

    /**
     * 除去元素的active类名
     */
    removeActive = function (){
        $(".page-item").removeClass("active")
    }
    /**
     * 点击向左翻页
     */
    $(".page-link-left").on("click",function (e){
        //console.log([[${page.startRow}]])
        //console.log([[${page.endRow}]])
        e.preventDefault();
        let $currentHref = $(".active");
        // console.log($currentHref.html())
        // console.log($currentHref.parent().html())
        if($currentHref.text()==="1"){
            //console.log("不做任何事")
        }else {
            getRepairInfoByPage(Number($currentHref.text())-1);
            removeActive();
            // console.log($currentHref.parent().prev().text());
            // console.log('--------------------------------')
            // console.log($currentHref.parent().prev().html())
            $currentHref.parent().prev().children().addClass("active");
        }
        $(this).blur();//去掉焦点
    })
    /**
     * 点击向右翻页
     */
    $(".page-link-right").on("click",function (e){
        e.preventDefault();
        let $currentHref = $(".active");
        //总页面数
        var pages = [[${page.pages}]]+'';
        //console.log($currentHref.text()+'    '+pages)
        if($currentHref.text()===pages){
            console.log("不做任何事")
        }else {
            getRepairInfoByPage(Number($currentHref.text())+1);
            removeActive();
            //向该节点右边的节点添加类名active
            $currentHref.parent().next().children().addClass("active");
            console.log("测试完成");
        }
        $(this).blur();//去掉焦点
    })
    //携带页码参数向后端发送请求
    getRepairInfoByPage = function (pageNum){
        $.get("/queryInfo/repair/"+pageNum,
            function (data){
                let repairInfo = data.list;
                $("#tbody").empty();//清空表格
                $.each(repairInfo,function (i) {
                    let  tbody = "<tr><td>"+repairInfo[i].buildingNo.trim()+"</td>"
                        +"<td>"+repairInfo[i].roomNo.trim()+"</td>"
                        +"<td>"+repairInfo[i].applicationDate.trim()+"</td>"
                        +"<td>"+repairInfo[i].repairDate.trim()+"</td>"
                        +"<td>"+repairInfo[i].whetherFromBalance.trim()+"</td>"
                        +"<td>"+repairInfo[i].repairMen.trim()+"</td>"
                        +"<td>"+repairInfo[i].money.trim()+"</td>"
                        +"<td>"+repairInfo[i].details.trim()+"</td></tr>";
                    $("#tbody").append(tbody);
                })
                showRecord(data.startRow,data.endRow,data.total);
            }
        )
    }

    //改变显示的记录条数
    showRecord = function (startRow,endRow,total){
        $("#span-pageinfo").empty();
        $("#span-pageinfo").append(`<span>显示 ${startRow}/${endRow} 条,共 ${total} 条记录</span>`);
    }
</script>
</body>
</html>